<template>
    <div class="cartDetails">
        <div class="content">
            <van-checkbox-group v-model="data.result" ref="checkboxGroup" @change="ChangGroup">
                <!-- <van-checkbox name="a">复选框 a</van-checkbox>
                <van-checkbox name="b">复选框 b</van-checkbox>
                <van-checkbox name="c">复选框 c</van-checkbox> -->
                <div v-for="(item, index) in store.state.Cart.cartList" :key="index">
                    <FoodAdd :item="item" showCheckBox="true"></FoodAdd>
                </div>
            </van-checkbox-group>
        </div>
        <van-submit-bar v-if="data.isDelete" :price="allPrice * 100" button-text="结算" @submit="onSubmit"
            class="submit-bar" button-color="#ffc400">
            <van-checkbox v-model="data.checked" @click="clickAll" checked-color="#ffc400">全选</van-checkbox>
        </van-submit-bar>

        <van-submit-bar v-else button-text="删除" @submit="clickDelete" class="submit-bar" button-color="#ffc400">
            <van-checkbox v-model="data.checked" @click="clickAll" checked-color="#ffc400">全选</van-checkbox>
        </van-submit-bar>

    </div>
</template>

<script setup>
// 引入vuex仓库
import { useStore } from 'vuex';
let store = useStore();
import FoodAdd from '../../../components/FoodAdd.vue';
import { computed, onMounted, reactive } from 'vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
let router=useRouter()
let data = reactive({
    result: [], //checkbox 选中项的数组，里面存放的事所有选中的id
    checked: true,
    isDelete: true//结算和删除按钮切换展示  
})


let props = defineProps(['changShow'])
// 删除按钮
const clickDelete = () => {
    // 选中的数组不是空的
    if (data.result.length) {
        // 更新cartList 数组
        store.commit('Delete', update(1));
        // console.log(update(1));
        data.result = [];
        if (store.state.Cart.cartList.length === 0) {
            console.log(1);
            props.changShow();
            store.commit('Edit', 'delete')
        }
    }
}

// 查找vuex中  里面存储多少个数据，拿到数据的id  将id 存储到 result数组中
const init = () => {
    data.result = store.state.Cart.cartList.map(item => {
        return item.id
    })
}
// 生命周期进行初始化
onMounted(() => {
    init();
})


const onSubmit = () => {
    // console.log(1);
    if (data.result.length != 0) {
        store.commit('PAY', update(2))

        router.push({
            query:{
                list:data.result
            },
            path:'/createorder'
        })
    } else {
        Toast({
            message: '请选中商品',
            icon: 'fail'
        })
    }
    console.log(store.state.Cart.orderList);
}
// 获取更新后的数据
const update = (type) => {
    return store.state.Cart.cartList.filter(item => {
        // 1、是删除  2更新
        // filter 过滤方法  如果为true 返回所有的数据  如果为false 返回为true的数据
        return type == 2 ? data.result.includes(item.id) : !data.result.includes(item.id);
    })
}
// 全选按钮
const clickAll = () => {
    // 因为根据data.result 来进行获取选中的状态
    // 如果data.result的长度和vuex数据的长度 不一致
    if (data.result.length != store.state.Cart.cartList.length) {
        init();
    } else {
        // 如果长度一致 代表全都呗选中的     data.result 来进行获取选中的状态 清空
        data.result = [];
    }
}
// 反选
const ChangGroup = (result) => {
    // console.log('result',result);
    if (result.length == store.state.Cart.cartList.length) {
        data.checked = true;
    } else {
        data.checked = false;
    }
    // 只要按钮进行处罚 重新跟心data.result数据
    data.result = result;
}

// 计算总价
const allPrice = computed(() => {
    // 需要拿到选中的数据  获取选中数据的num * 单价
    let countList = store.state.Cart.cartList.filter(item => {
        return data.result.includes(item.id)
    })

    let sum = 0; //总价
    countList.forEach(item => {
        sum += item.num * item.price
    });
    return sum;
    // console.log(countList);
})

import emitter from '../../../common/js/evenbus';
emitter.on('edit', () => {
    data.isDelete = !data.isDelete;
})
</script>

<style scoped lang="less">
.cartDetails {
    font-size: 14px;
    flex: 1;

    .content {
        padding: 15px;
        background-color: #fff;
        border-radius: 10px;
    }

    .submit-bar {
        bottom: 60px;
    }

    /deep/.van-submit-bar__bar {
        justify-content: space-between;
    }
}
</style>
